<template>
  <herin-container class="coalflow-video" title="视频监控" :delay="1" direction="Right">
    <template #tab>
      <div class="tab">
        <div v-for="(t, i) in (videos.length % 4)" :key="i" class="tab-item" :class="{ active: curTab === t }" @click="changeTab(t)" />
      </div>
    </template>
    <template #content>
      <div class="coalflow-video-content">
        <div v-for="(item,index) in videoList" :key="index" class="video-item" @click="openVideo(item)">
          <div class="video-item-url" />
          <div :class="[item.id=== curTitle? 'active-title' : '', 'video-title-box']">
            <span class="before-box" />
            {{ item.id }}
          </div>
        </div>
      </div>
    </template>
  </herin-container>
</template>

<script>
import HerinContainer from '@/components/HerinContainer.vue';
// import Bus from '@/utils/Bus.js';
export default {
  components: {
    HerinContainer
  },
  data() {
    return {
      videos: [
        { id: '主运二部', url: 'https://www.runoob.com/try/demo_source/movie.mp4' },
        { id: '综采25212', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm' },
        { id: '综采44206', url: 'https://www.runoob.com/try/demo_source/movie.mp4' },
        { id: '综采15217', url: 'https://www.runoob.com/try/demo_source/movie.mp4' },
        { id: '主运一部', url: 'https://www.runoob.com/try/demo_source/movie.mp4' },
        { id: '主运三部', url: 'https://www.runoob.com/try/demo_source/movie.mp4' }
      ],
      curTab: 1
    };
  },
  computed: {
    videoList() {
      const limit = 4;
      let data = [];
      data = this.videos.slice(
        (this.curTab - 1) * limit,
        limit * this.curTab
      );
      return data;
    },
    curTitle() {
      return this.$store.state.coalFlowVideoTitle;
    }
  },
  methods: {
    changeTab(cur) {
      this.curTab = cur;
    },
    openVideo({ id, url }) {
      this.$store.commit('setData', { name: 'coalFlowVideoTitle', value: id });
      const params = {
        isVideo: true,
        name: id,
        status: '正常',
        videoList: url
      };
      this.$store.commit('setData', { name: 'videoInfo', value: params });
      // Bus.$emit('OpenVideo', { 'name': id, 'idx': index, active: true, type: '正常' });
    }
  }
};
</script>

<style lang="scss" scoped>
.coalflow-video{
  .tab {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .tab-item {
      width: 0.625rem;
      height: 0.625rem;
      margin-left: .625rem;
      background-color: rgba(217, 217, 217, 100);
      cursor: pointer;
    }

    .active {
      background-color: #00E4FF;
    }
  }

  .coalflow-video-content{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0 .625rem;
    box-sizing: border-box;
    .video-item{
      width: 9.375rem;
      margin-bottom: .6875rem;
      background-color: rgba(25, 25, 25, 100);
      .video-item-url{
        width: 100%;
        height: 5.625rem;
        background-color: #fff;
      }
      .video-title-box{
        color: #DCE0E6;
        font-size: .875rem;
        height: 1.625rem;
        line-height: 1.625rem;
        text-align: left;
        padding-left: .625rem;
        box-sizing: border-box;
        .before-box{
          display: inline-block;
          width: .5rem;
          height: .5rem;
          border-radius: 50%;
          background-color: #12D0A1;
        }
      }
      .active-title{
        background-color: #0B2C43;
      }
    }
    .video-item:nth-child(3), .video-item:nth-child(4){
      margin-bottom: 0;
    }
    .video-item-url:hover{
      cursor: pointer;
    }
  }
}
</style>
